<template>
  <header>
    <a v-if="titles&&titles.length>2" @click="goBack"><i></i>返回</a>
      <template v-for="item in titles">
          <label>{{item}}</label>
      </template>
  </header>
</template>
<script>
  import {navList,routes} from 'js/index_routes'
   export default{
       data(){
           return{
               titles:[],
           }
       },
       created(){
           //向上遍历routes存至数组
           this.$bus.$on('listen-route-change',tits=>{
               if(tits){
                   this.titles=[] //重置titles
                   let navList1=navList
                   if(navList1) tits.forEach((it,index)=>{
                       if(index==0) navList1=navList1[''+(it-1)]
                       else navList1=navList1.sub[''+(it-1)]
                       this.titles.push(navList1.name)
                   })
               }
           })
       },
       methods:{
           goBack(){
               this.$router.go(-1)
           }
       }
   }
</script>
<style lang="scss" scoped>
   header{
       margin-left:24px;
       height:70px;
       line-height:70px;
       font-size: 16px;
       a,i{display:inline-block;}
       a{
           color: #3494E7;
           cursor: pointer;
           i{
               width:8px;
               height:8px;
               border-left:2px #3494E7 solid;
               border-top:2px #3494E7 solid;
               transform: rotate(-45deg);
               margin-right:5px;
               vertical-align: middle;
           }
       }
       label{
           font-size:16px;
           line-height:70px;
           color:#888;
            margin-left:3px;
       }
       label:not(:nth-of-type(1)):before{
           content:'';
           display:inline-block;
           width:8px;
           height:8px;
           border-right:2px #888 solid;
           border-top:2px #888 solid;
           transform: rotate(45deg);
           margin-right:5px;
       }
       label:last-child{
           color: #3D5266;
       }
   }
</style>